<template>
	<view class="dispensing">
		<view class="search_input">
			<uni-easyinput prefixIcon="search" @confirm="getDataList" @clear="getDataList" v-model="data.searchValue"
				placeholder="请输入患者姓名或电话搜索关键词">
			</uni-easyinput>
		</view>
		<view class="navbar">
			<view :class="['navbar_item',{'active':data.activeItem == item.id}]" @click="navChange(item.id)"
				v-for="(item) in data.navList" :key="item.id">
				{{item.name}}
			</view>
		</view>
		<!-- <uni-load-more status="more"> -->
		<scroll-view :scroll-top="data.scrollTop" scroll-y="true" class="scroll_Y" @scrolltolower="lower"
			@scroll="scroll">
			<view class="scroll-view-item uni-bg-red" v-for="(item) in data.dataList" :key="item.id"
				@click="routerLink(item)">
				<view class="userInfo">
					<img v-if="item.gender == '1'" class="user_icon" src="@/static/img/n1.png" alt="userinfo" />
					<img v-else class="user_icon" src="@/static/img/n0.png" alt="userinfo" />
					<text class="name">{{item.name}}</text> /
					<text class="phone">{{item.tel}}</text>
				</view>
				<view class="time">
					{{item.settlementTime}}
				</view>
				<view :class="['status',filterClass(item.pattern)]">
					{{item.pattern}}
				</view>
			</view>
		</scroll-view>
		<!-- </uni-load-more> -->
	</view>
</template>

<script setup>
	import {
		getDrugList
	} from "@/api/dispensing/index.js"
	import {
		reactive,
		onMounted
	} from "vue"
	const data = reactive({
		searchValue: '',
		activeItem: '1',
		scrollTop: 0,
		navList: [{
				name: '待发',
				id: '1'
			},
			{
				name: '已发',
				id: '2'
			},
			{
				name: '已退',
				id: '3'
			},
		],
		dataList: [],
		total: 0,
		pageSize: 12,
		current: 1,
	})
	onMounted(() => {
		getDataList()
	})
	// 获取列表数据
	const getDataList = async () => {
		let query = {
			current: data.current,
			size: data.pageSize,
			searchKey: data.searchValue,
			dispensing: data.activeItem
		}
		await getDrugList(query).then((res) => {
			if (res.code == 200) {
				data.dataList = res.data.records
				data.total = res.data.total
			}
		})
	}
	// 切换类型导航
	const navChange = (id) => {
		data.activeItem = id
		data.current = 1
		getDataList()
	}
	// 进入详情页
	const routerLink = (row) => {
		let detailName = data.activeItem == '1' ? '待发药详情' : data.activeItem == '2' ? '已发药详情' : '已退药详情'
		uni.navigateTo({
			url: `/pages/dispensing/details?id=${row.reservationId}&patientId=${row.patientId}&title=${detailName}`,
			animationType: 'pop-in',
			animationDuration: 200
		})
	}
	let lower = () => {

	}
	let scroll = () => {

	}
	let filterClass = (status) => {
		if (status == '门诊') return 'outpatient'
		else if (status == '零售') return 'retail'
		else return 'fast'
	}
</script>

<style lang="scss" scoped>
	.dispensing {
		width: 100%;
		height: 100vh;
		background-color: #f1f1f1;

		.search_input {
			padding: 15rpx 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			box-shadow: 0rpx 3rpx 5rpx 0rpx #ccc;
			position: sticky;
			top: 0;
			z-index: 99;

			.uniui-search {
				font-size: 18rpx;
			}
		}

		.navbar {
			margin-top: 10rpx;
			background-color: #fff;
			box-shadow: 0rpx 3rpx 5rpx 0rpx #ccc;
			display: flex;
			align-items: center;
			height: 80rpx;

			.navbar_item {
				width: 33.3%;
				line-height: 80rpx;
				text-align: center;
				font-size: 26rpx;
				border-bottom: 5rpx solid transparent;
			}

			.active {
				color: royalblue;
				border-bottom: 5rpx solid royalblue;
			}
		}

		.scroll_Y {
			width: 100%;
			margin-top: 6rpx;

			.scroll-view-item {
				background-color: #fff;
				padding: 20rpx 20rpx;
				box-sizing: border-box;
				margin-bottom: 5rpx;
				font-size: 26rpx;
				position: relative;

				.userInfo {
					display: flex;
					align-items: center;

					.user_icon {
						width: 40rpx;
						height: 40rpx;
						border-radius: 20rpx;
					}

					.name {
						font-size: 35rpx;
						font-weight: 700;
						margin: 0rpx 10rpx;
					}

					.phone {
						margin-left: 10rpx;
					}
				}

				.time {
					margin-top: 6rpx;
				}

				.status {
					position: absolute;
					top: 0;
					right: 0;
					padding: 10rpx 15rpx;
					border-radius: 0rpx 0rpx 0rpx 10rpx;
					// background-color: #ccc;
					box-sizing: border-box;
				}

				.outpatient {
					// 门诊
					color: #679eff;
					background-color: #ecf5ff;
				}

				.retail {
					// 零售
					color: #eaa23c;
					background-color: #fdf6ec;
				}

				.fast {
					// 快诊
					color: #68b983;
					background-color: #ecf8f3;
				}
			}
		}
	}
</style>